<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Онлайн кинотеатр</title>
    <link rel="stylesheet" href="styles/style.css">
    <link rel="stylesheet" href="styles/adaptive.css">
</head>
<body>

<header class="header">
    <div class="container">
        <div class="burger">☰</div>
        <a href="#" class="header-logo">
            <img src="assets/images/technology.png" alt="Логотип">
        </a>
        <nav class="menu">
            <ul>
                <li>
                    <a href="#">Моя библиотека</a>
                </li>
                <li>
                    <a href="#">Мои покупки</a>
                </li>
                <li>
                    <a href="#">Все фильмы</a>
                </li>
                <li>
                    <a href="#">Новинки</a>
                </li>
            </ul>
        </nav>
        <a href="#"><img src="assets/images/search.png" alt="Иконка поиска" class="header-search"></a>
    </div>
</header>

<section class="main">
    <div class="container">
        <h1>Сталкер</h1>
        <div class="main-info-text">
            1979, фантастика, драма, СССР
        </div>
        <div class="main-info-description">
            В некой запретной Зоне, по слухам, существует комната, где исполняются самые заветные желания. К этой
            комнате отправляются модный Писатель и авторитетный Профессор — каждый по своим причинам, о которых
            предпочитают не говорить. А ведет их туда Сталкер — проводник по Зоне — то ли юродивый, то ли апостол
            новой веры.
        </div>
        <div class="main-actions">
            <a href="#" class="button button-pink">Смотреть</a>
            <a href="#" class="button button-black button-black-bookmark">
                <img src="assets/images/bookmark.png" alt="Закладка">
            </a>
            <a href="#" class="button button-black button-black-camera">
                <img src="assets/images/camera.png" alt="Камера">
            </a>
        </div>
        <div class="main-image">
            <img src="assets/images/stalker.png" alt="Изображение фильма сталкер">
        </div>
    </div>
</section>

<section class="films">
    <div class="container">
        <h2>Другие фильмы</h2>
        <div class="films-items">
            <a href="#" class="films-item">
                <img src="assets/images/image1.png" alt="Изображение фильма">
            </a>
            <a href="#" class="films-item">
                <img src="assets/images/image2.png" alt="Изображение фильма">
            </a>
            <a href="#" class="films-item">
                <img src="assets/images/image3.png" alt="Изображение фильма">
            </a>
            <a href="#" class="films-item">
                <img src="assets/images/image4.png" alt="Изображение фильма">
            </a>
            <a href="#" class="films-item">
                <img src="assets/images/image5.png" alt="Изображение фильма">
            </a>
            <a href="#" class="films-item">
                <img src="assets/images/image6.png" alt="Изображение фильма">
            </a>
        </div>
        <div class="films-more">
            <img src="assets/images/arrows.png" alt="Иконка загрузки">
            <div class="show-more">Показать ещё</div>
        </div>
    </div>
</section>

</body>
</html>